<template>
  <div>
    <page-loading
        :loading.sync="pageLoading"
        :error.sync="pageError"
        :enable-pull-refresh="false"
        @reload="init"
    >

        <template v-if="hasInfo">
            <lottery-info :info="info" />
            <template v-if="hasPrizes && !isOpened">
                <lottery-count-down :prizes="prizes" />
                <lottery-condition :prizes="prizes" />
                <lottery-prize :prizes="prizes" />
            </template>
            <template v-else>
                <lottery-result :prizes="prizes" />
            </template>                    
            <div class="tip">该抽奖已自动过滤异常行为，请以开奖结果为准</div>
        </template>

    </page-loading>
  </div>
</template>

<script>
import PageLoading from '@/components/page-loading/PageLoading'
import LotteryInfo from '@/components/lottery/LotteryInfo'
import LotteryCountDown from '@/components/lottery/LotteryCountDown'
import LotteryCondition from '@/components/lottery/LotteryCondition'
import LotteryPrize from '../components/lottery/LotteryPrize'
import LotteryResult from '@/components/lottery/LotteryResult'
import { apiGetDetail, apiGetPrize } from '@/api/lottery'
import pageLoadingMixin from '@/mixins/pageLoading.js'
export default {
    name: 'Lottery',
    mixins: [pageLoadingMixin],
    metaInfo () {
        return {
            title: '互动抽奖'
        }
    },
    components: {
        PageLoading,
        LotteryInfo,
        LotteryCountDown,
        LotteryCondition,
        LotteryResult,
        LotteryPrize,
        LotteryResult
    },
    props: {
        id: {
            type: [Number, String],
            required: true
        }
    },
    data() {
        return {
            info: null,
            prizes: null
        }
    },
    computed: {
        hasInfo() {
            return !!this.info
        },
        hasPrizes() {
            return !!this.prizes
        },
        isOpened() {
            return this.hasPrizes ? this.prizes.status === 2 : false
        }
    },
    created() {
        this.init()
    },   
    watch: {
        id(newVal) {
            if (newVal) {
                this.init()
            }
        }
    },
    methods: {
        async init() {
            try {
                await this.getInfo()
                await this.getPrizes()
            } catch (error) {
                this.pageError = true
            }
        },
        async getInfo() {
            try {
                const { code, data } = await apiGetDetail({
                    dynamic_id: this.id
                })
                if (code === 0 && data) {
                    this.info = data.card
                }            
            } catch (error) {
                throw new Error(error)
            } finally {
                this.pageLoading = false
            }
        },
        async getPrizes() {
            try {
                const { code, data } = await apiGetPrize({
                    business_id: this.id
                })
                if (code === 0 && data) {
                    this.prizes = data
                }
            } catch (error) {
                
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .tip{
        padding: 10px 0;
        font-size: 12px;
        color: $color-text-secondary;
        text-align: center;
    }
</style>